<template>
  <div id="tiqianpiMenu">
    <div class="tiqianpiSelect">
      <el-select
        :popper-options="{
          modifiers: [{ name: 'computeStyles', options: { adaptive: false } }],
        }"
        v-model="selectValue"
        @change="handleChange"
        size="large"
        style="width: 300px"
        class="my-input"
      >
        <el-option
          v-for="item in options"
          :key="item.year"
          :label="item.year + '年招生计划'"
          :value="item.year"
        />
      </el-select>
    </div>

    <el-tree
      style="max-width: 600px"
      empty-text="暂无数据"
      :data="treeData"
      :props="defaultProps"
      accordion
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getSchoolPlanFilter } from '@/api/appv2/appv2';
const emits = defineEmits(['handleTreeData', 'updateBatchPlan']);
const selectValue = ref('2023年招生计划');
const checkValue = ref('');

const { treeData } = defineProps({
  treeData: {
    type: Array,
    default: () => [],
  },
});
const options = ref([]);
fecthSchoolPlanFilter();

function fecthSchoolPlanFilter() {
  let data = {
    pid: 21, //store.getters.user.userInfo.pid
    studentId: 327,
  };

  getSchoolPlanFilter(data).then((res) => {
    options.value = res.data.years;
  });
}

const handleChange = (val) => {
  selectValue.value = `${val}年招生计划`;
  checkValue.value = val;
  emits('handleTreeData', checkValue.value);
};
const defaultProps = {
  children: 'levels',
  label: 'name',
};
const handleNodeClick = (data, node) => {
  let type = 1;
  emits('updateBatchPlan', data, node.parent.data.name, type);
};
</script>

<style lang="scss" scoped>
#tiqianpiMenu {
  width: 200px;
  border: 1px solid #ebeef5;
}
</style>
<style>
.tiqianpiSelect .el-select--large .el-select__wrapper {
  border-radius: 0px;
  box-shadow: none;
  border-bottom: 1px solid #ebeef5;
}

/* /设置选择框的鼠标经过样式 */
.tiqianpiSelect .el-select .el-select__wrapper:hover {
  box-shadow: none !important;
}

/* 更改placeholder的颜色 */
.tiqianpiSelect .el-select .el-select__placeholder {
  color: black;
  font-weight: bold;
  font-size: 16px;
}
</style>
